<template>
    <div class='container container--zone' style='margin-top:60px;'>
        <div class='region region--full'>
            <div class='component component--module text-box u-center header--picks'>
                <div class='column column--primary' style='padding:0'>
                    <div class="element element--textblock">
                        <h1>Expert money advice, for every stage of your life</h1>
                        <p>Sinopoly Watch Picks highlights items we think you'll find useful; the Sinopoly Watch News
                            staff
                            is
                            not involved in creating this content. We might earn a commission from links in this
                            content.
                            <router-link to="'">Learn more</router-link>
                        </p>
                    </div>
                    <Latest v-if="isRegion" :lastleftData='lastleftData'></Latest>
                </div>
                <!-- money模块 -->
                <seeAllList v-if="isText" :lastmoneyData="lastmoneyData" :contTitle="contTitle"></seeAllList>
                <!-- Load模块 -->
                <seeAllList v-if="isText" :lastmoneyData="lastLoadData" :contTitle="contTitle1"></seeAllList>
                <!--RSAL ESTATE模块 -->
                <seeAllList v-if="isText" :lastmoneyData="readEsData" :contTitle="contTitle2"></seeAllList>
                <!--RETIREMENT模块 -->
                <seeAllList v-if="isText" :lastmoneyData="retirData" :contTitle="contTitle3"></seeAllList>
                <!--BANKING模块 -->
                <seeAllList v-if="isText" :lastmoneyData="bankingData" :contTitle="contTitle4"></seeAllList>
                <!--LIFESTYLE块 -->
                <seeAllList v-if="isText" :lastmoneyData="liftstyleData" :contTitle="contTitle5"></seeAllList>
                <!--TECHNOLOGY块 -->
                <seeAllList v-if="isText" :lastmoneyData="thchData" :contTitle="contTitle6"></seeAllList>
            </div>
        </div>
    </div>
</template>
<script setup>
import Latest from './moneyAdvice/latest/latest.vue';
import seeAllList from './seeAllList/seeAllList.vue';
import { usePickArrays } from '../../api/picks';
const { lastRightData, } = usePickArrays()
// 请求首页数据
import homeRequest from "@/api/home.js";
const markList = ref([]);
const lastleftData = ref([]);
const isRegion = ref(false);
// 新闻列表 头部左边大图stcoks关键字部分
const getNewList = () => {
    let data = {
        current: 1,
        size: 50,
        isImg: 1,
        key: 'stocks'
    }
    homeRequest.newsData(data)
        .then((res) => {
            if (res.code == "0") {
                console.log(res)
                markList.value = res.data.records
                if (markList.value.length >= 4) {
                    lastleftData.value = markList.value.slice(0, 6)
                }
                isRegion.value = true
            }
        })
        .catch((e) => {
        });
}
const groupList = ref([]);
const lastmoneyData = ref([]);
const lastLoadData = ref([]);
const readEsData = ref([]);
const retirData = ref([]);

const bankingData = ref([]);
const liftstyleData = ref([]);
const thchData = ref([]);
const isText = ref(false);
// 新闻分组列表 头部左边大图stcoks关键字部分
const getNewList1 = () => {
    let data = {
        key: 'stocks'
    }
    homeRequest.getgroupNew(data)
        .then((res) => {
            if (res.code == "0") {
                console.log(res)
                groupList.value = res.data
                if (groupList.value.pos1.news.length >= 4) {
                    lastmoneyData.value = groupList.value.pos1.news
                }
                if (groupList.value.pos2.news.length >= 4) {
                    lastLoadData.value = groupList.value.pos2.news
                }
                if (groupList.value.pos3.news.length >= 4) {
                    readEsData.value = groupList.value.pos3.news
                }
                if (groupList.value.pos4.news.length >= 4) {
                    retirData.value = groupList.value.pos4.news
                }

                if (groupList.value.pos5.news.length >= 4) {
                    bankingData.value = groupList.value.pos5.news
                }
                if (groupList.value.pos6.news.length >= 4) {
                    liftstyleData.value = groupList.value.pos6.news
                }
                if (groupList.value.pos7.news.length >= 4) {
                    thchData.value = groupList.value.pos7.news
                }
                isText.value = true
            }
        })
        .catch((e) => {
        });
}
// 在组件挂载后播放视频
onMounted(async () => {
    getNewList()
    getNewList1()
});

const contTitle = reactive({
    title: 'Money',
    seeTitle: 'SEE ALL IN MONEY'
})
const contTitle1 = reactive({
    title: 'LOANS',
    seeTitle: 'SEE ALL IN LOANS'
})
const contTitle2 = reactive({
    title: 'RSAL ESTATE',
    seeTitle: 'SEE ALL IN RSAL ESTATE'
})
const contTitle3 = reactive({
    title: 'RETIREMENT',
    seeTitle: 'SEE ALL IN RETIREMENT'
})
const contTitle4 = reactive({
    title: 'BANKING',
    seeTitle: 'SEE ALL IN BANKING'
})
const contTitle5 = reactive({
    title: 'LIFESTYLE',
    seeTitle: 'SEE ALL IN LIFESTYLE'
})
const contTitle6 = reactive({
    title: 'TECHNOLOGY',
    seeTitle: 'SEE ALL IN TECHNOLOGY'
})
</script>
<style scoped lang='scss'>
.header--picks {
    p {
        color: #202020;
        font-size: .875rem;
        max-width: 920px;
        margin: 0 auto;
    }
}
</style>